<template>
  <inventory-service-indicator />
  <el-tabs class="demo-tabs">
    <el-tab-pane v-for="item in Tabs" :key="item.id" :label="item.linkText">
      <component :is="item.component" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import InventoryTableSystem from './InventoryTableSystem.vue';
import InventoryTableProcessors from './InventoryTableProcessors.vue';
import InventoryTablePowerSupplies from './InventoryTablePowerSupplies.vue';
import InventoryTablePci from './InventoryTablePci.vue';
import InventoryTableFans from './InventoryTableFans.vue';
import InventoryTableDimmSlot from './InventoryTableDimmSlot.vue';
import InventoryTableChassis from './InventoryTableChassis.vue';
import InventoryTableBmcManager from './InventoryTableBmcManager.vue';
import InventoryServiceIndicator from './InventoryServiceIndicator.vue';
import { useSystemStore } from '@/store/SystemManagement/SystemInformation/SystemStore';
import { useI18n } from 'vue-i18n';

const i18n = reactive(useI18n());

const systemStore = useSystemStore();

systemStore.getSystem();

const Tabs = computed(() => [
  {
    id: 'system',
    linkText: i18n.t('pageInventory.system'),
    component: InventoryTableSystem,
  },
  {
    id: 'bmc',
    linkText: i18n.t('pageInventory.bmcManager'),
    component: InventoryTableBmcManager,
  },
  {
    id: 'chassis',
    linkText: i18n.t('pageInventory.chassis'),
    component: InventoryTableChassis,
  },
  {
    id: 'dimms',
    linkText: i18n.t('pageInventory.dimmSlot'),
    component: InventoryTableDimmSlot,
  },
  {
    id: 'fans',
    linkText: i18n.t('pageInventory.fans'),
    component: InventoryTableFans,
  },
  {
    id: 'powerSupply',
    linkText: i18n.t('pageInventory.powerSupplies'),
    component: InventoryTablePowerSupplies,
  },
  {
    id: 'processors',
    linkText: i18n.t('pageInventory.processors'),
    component: InventoryTableProcessors,
  },
  {
    id: 'pci',
    linkText: i18n.t('pageInventory.pci'),
    component: InventoryTablePci,
  },
]);
</script>
